<template>
  <!-- 自定义导航栏 -->
  <view class="navRootContainer" :style="{ backgroundColor: backgroundColor }">
    <!-- 手机状态栏 -->
    <view
      class="statusBar"
      :style="{ width: '100%', height: statusBarHeight }"
    ></view>
    <!-- 标题导航容器 -->
    <view class="navigationBarContainer" :style="{ color: titleColor }">
      <text>{{ title }}</text>
    </view>
  </view>
</template>

<script>
import { pxToRpx } from "../utils/to.js";
export default {
  name: "NavigationBar",
  props: {
    title: {
      type: String,
      default: "快乐商城",
    },
    titleColor: {
      type: String,
      default: "#fff",
    },
    backgroundColor: {
      type: String,
      default: "transparent",
    },
  },
  computed: {
    // 手机状态栏高度
    statusBarHeight() {
      return pxToRpx(uni.getSystemInfoSync().statusBarHeight) + "rpx";
    },
    // NavigationBar 总体高度（包含手机状态栏）
    navigationBarHeight() {
      return parseInt(this.statusBarHeight) + 88 + "rpx";
    },
  },
};
</script>

<style lang="scss" scoped>
.navRootContainer {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  transition: background-color 0.3s;

  // 标题导航容器
  .navigationBarContainer {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 34rpx;
    text-align: center;
  }
}
</style>
